<%@page contentType="text/html; charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>

<script type="text/javascript">
	function clickFunctionId(functionId, event) {		
		$("input[name='isParentNode']").attr("value",event.parentNode.nextSibling?"true":"false");
		$.post('getMenu', {"menuId":functionId}, 
				function(data) {
				   var functions = $.parseJSON(data.result);						
				   $("#showFunctionId").html(functions.id);
				   $("#functionName").val(functions.menuName);
				   $("#functionAction").val(functions.menuUrl);
				   $("#functionDesc").val(functions.menuDesc);
				   $("input[name='menuId']").val(functions.id);
				   $("input[name='currentId']").val(functions.id);
				   $("input[name='parentId']").val(functions.parentId);
		}, "json");
	};
    function getTree(data, parentId){ 
        var tree; 
        if(parentId==0){ 
            tree = '<ul class="tree treeFolder expand" id="menuRoot">'; 
        }else{ 
            tree = '<ul>'; 
        } 
        for(var i in data){ 
        	if(data[i].parentId == parentId){ 
 	        	tree += "<li id='li_"+data[i].id+"'><a href=javascript:; onclick='clickFunctionId("+data[i].id+",this)' tname='functionName'  tvalue='"+data[i].id+"'>"+data[i].menuName+"</a>";
 	        	tree += getTree(data, data[i].id); 
 	            tree += "</li>"; 
 	        }  
        } 
        return tree+"</ul>"; 
    } 
 
	$(document).ready(function() {
	 	loadMenu();
		$("#update1").click(function(){
			$("#webMk").val("U");	
			$("#btnName").val("0");	
			sub(); return;
		});		 
	    $("#addSiblingNode").click(function(){
	    	$("#webMk").val("I");
	    	$("#btnName").val("0");
	    	sub(); return;
	    });
		$("#addSonNode").click(function(){
			$("input[name='parentId']").val($("input[name='currentId']").val());
			$("#webMk").val("I"); 
			$("#btnName").val("1");
			sub();
			return;
		});
		$("#delNode").bind('click',function(){
			$("#btnName").val("0");
			if($("input[name='isParentNode']").val()=="true") {  
				alertMsg.error("不能对父节点进行删除!");
				return;
			}else{
				alertMsg.confirm("您确定要删除此菜单吗?", {
                    okCall: function(){
                        $("#webMk").val("D");
				    	sub(); return;
                      }
                  });
           }
	    });
	});//end ready
	function loadMenu(){
		var data = $.parseJSON($.trim($("#menuJson").text()));
		$("#functionManageTree").html(getTree(data,0).replaceAll("<ul></ul>",""));
	}
	
	function sub(){ 
		var mId = $("#functionId").val(); 
		if($.trim(mId)==""){
			alertMsg.error("未选择菜单, 操作失败!");
			return;
		}
		var isP = $("input[name='isParentNode']").val();
		var mroot = $("#li_"+mId).parent();
		var btnName = $("#btnName").val();
		if(btnName==1){
			if(isP == "false" && mroot.attr("id") != "menuRoot"){
				alertMsg.error("当前菜单已是二级菜单, 无法再新增子菜单!");
				return;
			} 
		}
		var mk = $("#webMk").val();
		var url = $("#functionAction").val();
		var name = $("#functionName").val();
		var desc = $("#functionDesc").val();
		var pId = $("input[name='parentId']").val();
		$.post('saveMenu', {"menuId": mId, "menuUrl": url,"menuName":name,"menuDesc":desc,"webMk":mk,"parentId":pId }, 
			function(data) { 
				var rlt = $.parseJSON(data.result);	
				var statusCode = rlt.statusCode;
				var msg = rlt.message;
				alertMsg.info(msg);
				if(statusCode==200){
					var tabId = $("ul.navTab-tab li.selected").attr("tabid");
					navTab.reloadFlag(tabId);
				}				
		}, "json");
	}
 </script>
</HEAD>

<div class="pageContent" style="padding: 5px">
<div>
	<div id="functionManageTree"
		style="float: left; display: block; margin: 10px; overflow: auto; width: 200px; height: 400px; border: solid 1px #CCC; line-height: 21px; background: #FFF;">
		<!--此处插入functionManageTree树 -->
	</div>

	<div id="jbsxBox" class="unitBox" style="margin-left: 246px;">
		<div class="pageContent">
			<form method="post" class="pageForm required-validate" id="funForm"
				onsubmit="return validateCallback(this,navTabAjaxDone)">
				<div class="pageFormContent nowrap" layoutH="58">
					<!-- 点击右边的树时给functionId,currentId,parentId赋值-->					
					<input type="hidden" name="menuId" id="functionId" /> 
					<input type="hidden" name="parentId" value="" /> 
					<input type="hidden" name="currentId" />
					<input type="hidden" name="webMk" value="" id="webMk" />
					<!-- 判段是不是父节点 -->
					<input type="hidden" name="isParentNode" value="true" /> 
					<input type="hidden" value="" id="btnName" />
					<dl>
						<dt>
							<span class="tabtitle">菜单I D</span>:
						</dt>
						<dd id="showFunctionId">
							&nbsp;
						</dd>
					</dl>
					<dl>
						<dt>
							<span class="tabtitle">菜单名称: </span>:
						</dt>
						<dd>
							<input type="text" size="30" name="menuName" class="required" id="functionName" />
						</dd>
					</dl>
					<dl>
						<dt>
							<span class="tabtitle">菜单地址: </span>:
						</dt>
						<dd>
							<input class="textinput" type="text" size="30" name="menuUrl" id="functionAction" />
						</dd>
					</dl>
					<dl>
						<dt>
							<span class="tabtitle">菜单描述</span>:
						</dt>
						<dd>
							<textarea cols="28" rows="4" name="menuDesc" id="functionDesc"></textarea>
						</dd>
					</dl>
					<dl>
						<dt>
							&nbsp;
						</dt>
					</dl>
					<dl>
						<dd>
						</dd>
					</dl>
					<dl>

						<dt>
							&nbsp;
						</dt>
					</dl>
					<div>
						<ul>
							<li>
								<div class="buttonActive">
									<div class="buttonContent">
										<span id="menuJson" style="display: none;">${menuJson }</span>
										<button type="button" value="修改保存" id="update1" class="w3">修改保存</button>
									</div>
								</div>
							</li>
							<li></li>
							<li>
								<div class="button" style="margin-left:8px;">
									<div class="buttonContent">
										<button type="button" id="addSiblingNode" value="添加同级节点" class="w3">添加同级节点</button>
									</div>
								</div>
							</li>
							
							<li>
								<div class="button" style="margin-left:8px;">
									<div class="buttonContent">
										<button type="button" value="添加子节点" class="w3" id="addSonNode">添加子节点</button>
									</div>
								</div>
							</li>
							<li>
								<div class="button" style="margin-left:8px;">
									<div class="buttonContent">
										<button type="button" value="删除" class="w3" style="color:#f00;" id="delNode">
											删除
										</button>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<dl>
						<dt style="width:80%; margin-top:8px;">
							<span style="color:#f00; line-height: 24px; font-size:14px;">
								* 操作说明: <br>
								(1)新增菜单时, 需点击左侧菜单, 然后点击不同类型的新增按钮,最后新增后,
								需找到刚新增的菜单进行修改, 修改后再保存, 菜单就新增好了!
								<br>
								  (2) 删除菜单时, 不能直接对一级菜单删除,	需先删除一级菜单下的子菜单(二级菜单), 再删除一级菜单.
								 <br>
								  (3) 菜单只能有两级, 即二级菜单下不能再新增子菜单.						
							</span>
						</dt>
					</dl>
				</div>
			</form>
		</div>
	</div>
</div>
</div>